<template>
	<view class="content">
        <!-- navbar -->
        <u-navbar :fixed="true" :shadow="false" :safeAreaInsetTop="true" :placeholder="true"
            @leftClick="back" title="班组管理" >
        </u-navbar>

        <!-- search -->
        <view class="u-flex u-row-between u-p-b-20 headerEle" :style="{top:systemInfo.headerH+'px'}" >
            <u--input
                class="search-input u-p-l-30 u-p-r-30"
                fontSize="28rpx"
                v-model="paging.keyWord"
                prefixIcon="search"
                prefixIconStyle="font-size:24px"
                placeholder="请输入班组名称/班组长查询信息"
                placeholderStyle="fontSize:28rpx"
                clearable
                border="none">
            </u--input>
            <u-button class="search-btn u-m-l-20" type="primary" text="搜索" @tap="searchData"></u-button>
        </view>

        <!-- 占位 -->
        <view style="height:94rpx"></view>

     
        <view class="uni-area">
            <!-- 班组概况 -->
            <view class="u-m-t-30 general">
                <text class="u-font-32 font-bold uni-inverse-color">班组概况</text>
                <view class="u-m-t-30 table">
                    <u-row class="teamTr">
                        <u-col span="2" align="center" class="teamTh">序号</u-col>
                        <u-col span="2" align="center" class="teamTh">班组数</u-col>
                        <u-col span="3" align="center" class="teamTh">班组人数</u-col>
                        <u-col span="5" align="center" class="teamTh">所属企业</u-col>
                    </u-row>
                    <u-row class="teamTr" v-for="(item,index) in teams.list" :key="index">
                        <u-col span="2" align="center" class="teamTd">{{index+1}}</u-col>
                        <u-col span="2" align="center" class="teamTd">{{item.groups}}</u-col>
                        <u-col span="3" align="center" class="teamTd">{{item.member}}</u-col>
                        <u-col span="5" align="center" class="teamTd"><text class="u-font-26">{{item.deptName}}</text></u-col>
                    </u-row>
                    <u-row class="teamTr">
                        <u-col span="2" align="center" class="teamTh">总计</u-col>
                        <u-col span="2" align="center" class="teamTh">{{teams.groups}}</u-col>
                        <u-col span="3" align="center" class="teamTh">{{teams.members}}</u-col>
                        <u-col span="5" align="center" class="teamTh">{{teams.list.length}}</u-col>
                    </u-row>
                </view>
            </view>

            <!-- 操作 -->
            <view v-if="menusShow" class="u-m-t-50 u-flex u-row-between">
                <view v-for="(item,index) in menus" :key="index" @tap.stop="menuSkip(item)"
                    class="u-flex u-flex-col" style="min-height:128rpx">
                    <u--image :src="item.icon" width="98rpx" height="98rpx"></u--image>
                    <text class="u-font-26 uni-dec-color">{{item.title}}</text>
                </view>
            </view>

            <!-- 班组信息 -->
            <view class="u-m-t-50 u-font-30 font-bold">班组信息</view>
            <uni-item-team class="u-m-t-30" v-for="(tem,ind) in page.list" :key="ind" :listItem="tem"/>

            <!-- 返回顶部 -->
            <u-back-top :scroll-top="page.scrollTop" @tap="toTop"></u-back-top>
            <!-- 加载更多 -->
            <u-loadmore :status="page.status" />
        </view>

        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                // 设备信息
                systemInfo: uni.getStorageSync('systemInfo'),
                // 用户信息
                userInfo: uni.getStorageSync("userInfo"),
                parameter:{
                    deptId: null, // 所属部门编号
                    gcbh: null // 所属项目(工程)编号
                },
                // 班组概况
                teams:{
                    groups: 0,
                    members: 0,
                    list:[
                        { serial:'', groups: 2, member: 8, deptName:'营业执照' },
                    ]
                },
                // 操作菜单
                menusShow: true,
                menus:[
                    // /pages/team-bag/altf?type=leave
                    { icon:'/static/team/icon1.png', title:'新增班组', url:'/pages/common/add?type=team' },
                    { icon:'/static/team/icon2.png', title:'人员离场', url:'/pages/common/add?type=leave' },
                    { icon:'/static/team/icon3.png', title:'人员调岗', url:'/pages/common/add?type=transfer' },
                    { icon:'/static/team/icon4.png', title:'班组长变更', url:'/pages/common/add?type=foreman' },
                ],
                // 分页相关参数
                paging:{
                    pageNum: 1,
                    pageSize: this.$config.pageSize,
                    keyWord: '',
                },
                page:{
                    scrollTop: 0,
                    status: 'nomore',
                    total: 0,
                    list: [], // 列表
                }
			}
		},

        onPageScroll(e) {
            this.page.scrollTop = e.scrollTop;
        },
        onReachBottom(){
            if( this.page.list.length < this.page.total ){
                this.paging.pageNum += 1
                this.page.status = 'loading'
                this.getGroupList()
            }else{
                this.page.status = 'nomore'
            }
        },

		onLoad() {
            this.parameter.deptId = this.userInfo.deptId,
            this.parameter.gcbh = this.userInfo.ssgcbh
            // 班组概况
            this.getHomeGroupOverview()
            // 权限判断
            this.jurisdiction()
            // 班组列表
            this.getGroupList()
		},

		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },
            // 跳转
            menuSkip(item){
                uni.navigateTo({ url: item.url })
                return false
                // item.title=='人员离场' || 
                if( item.title=='班组长变更'){
                    uni.$u.toast('开发中')
                }else{
                }
            },
            // 搜索
            searchData(){
                this.paging.pageNum = 1
                this.page.list = []
                this.getGroupList()
            },


            // 班组概况
            getHomeGroupOverview(){
                uni.showLoading({ title:'班组概况获取中' })
                this.$request(this,this.$apis.HomeGroupOverview, this.parameter).then(res=>{
                    // console.log('班组概况',res)
                    if( res.length != 0 ){
                        res.map((v,i)=>{
                            this.teams.groups += Number(v.groups)
                            this.teams.members += Number(v.member)
                        })
                        this.teams.list = res
                    }
                }).then()
            },

            // 权限判断
            jurisdiction(){
                console.log('用户信息',this.userInfo)
                if( this.userInfo.ssgcbh != -1 && this.userInfo.terminal == 'xmd' ){
                    if( this.userInfo.role == 'lzry' || this.userInfo.role == 'xmjl' ){
                        this.menusShow = true
                    }else{
                        this.menusShow = false
                    }
                }else{
                    this.menusShow = false
                }
            },

            // 班组列表
            getGroupList(){
                uni.showLoading({ title:'班组列表加载中' })
                const parameter = Object.assign(this.parameter,this.paging)
                // console.log('班组列表---参数',parameter)
                this.$request(this,this.$apis.GroupList,parameter).then(res=>{
                    // console.log('班组列表',res)
                    this.page.total = res.total
                    if( Array.isArray(res.data) && res.data.length != 0 ){
                        this.status = 'loadmore'
                        res.data.map((v,i)=>{
                            this.page.list.push(v)
                        })
                    }else{
                        this.status = 'nomore'
                        this.$tools.uToast(this,'default','','暂未查询到班组列表相关数据',3000)
                    }
                }).then()
            },

            // 回到顶部
            toTop(){
                uni.pageScrollTo({ scrollTop: 0, duration: 300 })
            }
		}
	}
</script>

<style lang="scss">
    .content{
        // 头部搜索
        .headerEle{
            width: 100%;
            position: fixed !important;
            left: 0;
            .search-input{
                width: 534rpx !important;
                box-sizing: border-box;
                height: 74rpx;
                background: #F6F7F8;
            }
            .search-btn{
                width: 136rpx;
                height: 74rpx;
                font-size: 28rpx;
            }
        }

        // 概况
        .general{
            padding: 40rpx 30rpx;
            border-radius: 10rpx;
            background: linear-gradient(133deg, #21A5F3 0%, #21BBF3 100%);
            box-shadow: 0px 5rpx 10rpx rgba(0, 0, 0, 0.05);
            .table{
                border: 1rpx solid #eee;
                border-radius: 8rpx;
                .teamTr{
                    height: 80rpx;
                    &:nth-of-type(even){
                        background: #F6F7F8;
                    }
                    &:nth-of-type(odd){
                        background: #fff;
                    }
                    .teamTh{
                        font-size: 28rpx;
                        font-weight: bold;
                    }
                    .teamTd{
                        font-size: 28rpx;
                        color: $uni-text-color-dec;
                        &:last-child{
                            color: $uni-higt-error !important;
                        }
                    }
                }
            }
        }
    }
</style>
